﻿@model Sheng.WeixinConstruction.Client.Shell.Models.LotteryViewModel

@{
    ViewBag.SubTitle = "活动";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<style type="text/css">
    .campaignName {
        font-size: 0.14rem;
        font-weight: bold;
    }

    .campaignDescription {
        font-size: 0.13rem;
        color: #666;
    }

    #divMemberInfo {
        font-size: 0.14rem;
        line-height: 0.14rem;
        text-align: center;
        margin-top: 0.05rem;
    }

    #divShareMask {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        text-align: right;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    }



    .divOngoingPeriod {
        margin-top: 0.1rem;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: center;
        font-size: 0.16rem;
        font-weight: bold;
        color: white;
    }

    .divEndPeriod {
        margin-top: 0.1rem;
        border: 1px solid #AAAAAA;
        background-color: #EEEEEE;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: center;
        font-size: 0.16rem;
        font-weight: bold;
        color: #000000;
    }

    .divPeriodTitle {
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: center;
        font-size: 0.16rem;
        font-weight: bold;
        color: #FFFFFF;
    }

    .divLogButton {
        border: 1px solid #FF4D4D;
        background-color: #FEEAE2;
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: center;
        font-size: 0.16rem;
        font-weight: bold;
        color: #FF4C4C;
    }
</style>

<script>

    //当前页
    var _ongoingCurrentPage = 1;
    var _ongoingTotalPage = 1;

    //当前页
    var _endedCurrentPage = 1;
    var _endedTotalPage = 1;

    var _campaignId = getQueryString("campaignId");

    $(document).ready(function () {
        $(document).scroll(function () {
            $("#divShareMask").css("top", document.body.scrollTop);
        });

        var jsApiConfigStr = "@Newtonsoft.Json.JsonConvert.SerializeObject(Model.JsApiConfig)";
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("&quot;", "gm"), "\"");
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("\r\n", "gm"), "");
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("\n", "gm"), "");
        var jsApiConfig = eval('(' + jsApiConfigStr + ')');

        wx.config(jsApiConfig);

        loadOngoingPeriod();
        loadEndedPeriod();
    });

    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: '@Model.Campaign.ShareTimelineTitle', // 分享标题
            link: '@Request.Url.ToString()', // 分享链接
            imgUrl: '@Model.Campaign.ShareImageUrl', // 分享图标
            success: function () {
                shareSuccess("ShareTimeline");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareAppMessage({
            title: '@Model.Campaign.ShareAppMessageTitle', // 分享标题
            desc: '@Model.Campaign.ShareAppMessageDescription', // 分享描述
            link: '@Request.Url.ToString()', // 分享链接
            imgUrl: '@Model.Campaign.ShareImageUrl', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                shareSuccess("ShareAppMessage");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });

    wx.error(function (res) {
        alert("error:" + res);
    });

    function shareSuccess(type) {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/" + type + "/@ViewBag.Domain.Id?campaignId=" + _campaignId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    if (resultObj.Point == 0)
                        return;

                    var msg = "";
                    if (resultObj.Point > 0) {
                        msg += "获得积分：" + resultObj.Point;
                    }
                    if (msg != "") {
                        layerAlertBtn(msg);
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showCampaignDescription() {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/GetCampaignDescription/@ViewBag.Domain.Id?id=" + _campaignId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    var gettpl = document.getElementById('campaignDescription').innerHTML;

                    laytpl(gettpl).render(resultObj, function (html) {
                        var pageii = layer.open({
                            type: 1,
                            content: html,
                            shadeClose: false,
                            style: 'position:fixed; left:0.1rem; top:0.1rem;right:0.1rem; bottom:0.1rem; border:none;'
                        });
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadOngoingPeriod(targetPage) {
        if (targetPage > _ongoingTotalPage)
            return;

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.PageSize = 10;
        args.CampaignId = _campaignId;

        $.ajax({
            url: "/Api/Campaign/GetLotteryOngoingPeriodList/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('ongoingPeriodItemTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('ongoingPeriodContainer').innerHTML += html;
                    });

                    _ongoingCurrentPage = resultObj.Page;
                    _ongoingTotalPage = resultObj.TotalPage;
                    if (_ongoingCurrentPage >= _ongoingTotalPage) {
                        // $("#divOngoingPagingContainer").html("没有更多了");
                        $("#divOngoingPagingContainer").hide();
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadEndedPeriod(targetPage) {
        if (targetPage > _endedTotalPage)
            return;

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.PageSize = 10;
        args.CampaignId = _campaignId;

        $.ajax({
            url: "/Api/Campaign/GetLotteryEndedPeriodList/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('endedPeriodItemTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('endedPeriodContainer').innerHTML += html;
                    });

                    _endedCurrentPage = resultObj.Page;
                    _endedTotalPage = resultObj.TotalPage;
                    if (_endedCurrentPage >= _endedTotalPage) {
                        // $("#divEndedPagingContainer").html("没有更多了");
                        $("#divEndedPagingContainer").hide();
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showOngoingDetail(periodId) {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/GetLotteryPeriod/@ViewBag.Domain.Id?id=" + periodId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('ongoingDetailTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj, function (html) {
                        var pageii = layer.open({
                            type: 1,
                            content: html,
                            shadeClose: false,
                            style: 'border:none;'
                        });
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showEndedDetail(periodId) {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/GetLotteryWinnerList/@ViewBag.Domain.Id?periodId=" + periodId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('endedDetailTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj, function (html) {
                        var pageii = layer.open({
                            type: 1,
                            content: html,
                            shadeClose: false,
                            style: 'position:fixed; left:0.1rem; top:0.1rem;right:0.1rem; bottom:0.1rem; border:none;'
                        });
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function lotterySign(periodId) {
        @if (Model.Attention == false)
        {
             <text>
            layerAlertBtn("请先关注我们才可以参与哦~", function () {
            window.location.href = '@ViewBag.DomainContext.GuideSubscribeUrl';
        });
        return;
        </text>
        }

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/LotterySign/@ViewBag.Domain.Id?campaignId=" + _campaignId + "&periodId=" + periodId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var msg = "";
                    switch (data.Data.Result) {
                        case 0:
                            msg = "报名成功！";
                            layer.closeAll();
                            break;
                        case 1:
                            msg = "报名失败。";
                            break;
                        case 2:
                            msg = "活动或周期不在进行中。";
                            break;
                        case 3:
                            msg = "已经报过名了。";
                            break;
                        case 4:
                            msg = "活动或者周期不存在";
                            break;
                        case 5:
                            msg = "您积分不足了哦~";
                            break;
                        case 6:
                            msg = "本期已达最大允许参与人数~";
                            break;
                        default:
                            msg = "未知错误";
                            break;
                    }
                    layerAlert(msg);

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showShareMask() {
        $("#divShareMask").css("top", document.body.scrollTop);
        $("#divShareMask").show();

    }

    function hideShareMask() {
        $("#divShareMask").hide();

    }

    //0、46、64、96、132数值可选，0代表640*640正方形头像
    function fitHeadImage(url, size) {

        if (url == undefined || url == null || url == "")
            return "";

        url = url.substr(0, url.length - 1);
        url = url + size;
        return url;
    }

    function guideSubscribe() {
        window.location.href = '@ViewBag.DomainContext.GuideSubscribeUrl';
    }


</script>

<script type="text/html" id="campaignDescription">
    <div style="position: fixed; top: 0.1rem; left: 0.1rem; right: 0.1rem; bottom: 0.45rem; overflow: auto;">
        {{ d }}
    </div>
    <div style="position: fixed; bottom: 0.1rem; left: 0.1rem; right: 0.1rem;">
        <div class="divRectangle_Gray" style="margin-top: 0.1rem; " onclick="layer.closeAll()">
            关 闭
        </div>
    </div>
</script>

<script type="text/html" id="ongoingDetailTemplate">

    <div class="divPeriodTitle defaultBgColorLight">
        {{d.Period.Name}}
    </div>
    <div style="background-color: white; margin-top: 0.2rem; margin-bottom: 0.15rem; padding-left: 0.15rem; padding-right: 0.15rem;">
        @if (Model.Attention)
        {
            <text>
            {{# if(d.Log != undefined && d.Log != null){ }}
                <div>
                    您已经报过名了！<br />
                    请留意抽奖结果~
                </div>
            {{# } else{}}
                <div>
                    赶紧报名参加吧！
                </div>

            {{# } }}
            </text>
        }
        else
        {
            <div>
                赶紧关注我们报名参加吧！
            </div>
        }
        <div style="margin-top: 0.1rem;">
            截止时间：{{ d.Period.EndTime }}
        </div>
        @if (Model.Lottery.Point > 0)
        {
            <div style="margin-top: 0.1rem;">
                所需积分：@Model.Lottery.Point
            </div>
        }
        <div style="margin-top: 0.2rem;">
            @if (Model.Attention)
            {
                <text>
                {{# if(d.Log == undefined || d.Log == null){ }}
                    <div class="divRectangle" style="margin-left: 0.2rem; margin-right: 0.2rem" onclick="lotterySign('{{d.Period.Id}}')">
                        报 名
                    </div>
                {{# } }}
                </text>
            }
            else
            {
                <div class="divLogButton" style="margin-left: 0.2rem; margin-right: 0.2rem" onclick="guideSubscribe()">
                    关注我们
                </div>
            }
            <div class="divRectangle_Gray" style="margin-top: 0.15rem; margin-left: 0.2rem; margin-right: 0.2rem; " onclick="layer.closeAll()">
                再看看
            </div>
        </div>
    </div>

</script>

<script type="text/html" id="endedDetailTemplate">

    <div class="divPeriodTitle defaultBgColorLight">
        {{d.Period.Name}}
    </div>
    <div style="position: fixed; top: 0.5rem; left: 0.1rem; right: 0.1rem; bottom: 0.45rem; overflow: auto;">
        {{# if(d.Period.Drawn == false){ }}
        <div style="color: black; font-weight: bold">
            马上开奖，请稍候...
        </div>
        {{# } else{}}

        @if (Model.Attention)
        {
            <text>
            {{# if(d.IsWinner){ }}
                <div style="color: red; font-weight: bold">
                    恭喜，您被抽中！
                </div>
            {{# } else{}}
                <div style="color: black; font-weight: bold">
                    这次的名单中似乎没有你...
                </div>
            {{# } }}
            </text>
        }

        <div style="margin-top: 0.15rem">
            中奖名单：
        </div>
        <div style="margin-top: 0.15rem; margin-left: 0.2rem">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                {{# for(var i = 0, len = d.WinnerList.length; i < len; i=i+1){ }}
                {{# var headimg = fitHeadImage(d.WinnerList[i].Headimgurl,46) }}
                <tr style="height: 0.5rem;">
                    <td style="width: 0.5rem">
                        <img src="{{headimg}}" style="width: 0.4rem;"></td>
                    <td>{{d.WinnerList[i].NickName}}</td>
                </tr>
                {{# } }}
            </table>

        </div>
        {{# } }}
    </div>
    <div style="position: fixed; bottom: 0.1rem; left: 0.1rem; right: 0.1rem;">
        <div class="divRectangle_Gray" style="margin-top: 0.1rem; " onclick="layer.closeAll()">
            关 闭
        </div>
    </div>

</script>


<script id="ongoingPeriodItemTemplate" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i=i+1){ }}

    <div class="divOngoingPeriod defaultBgColorLight defaultBorderColor" onclick="showOngoingDetail('{{ d[i].Id }}')">
        {{ d[i].Name }}
    </div>

    {{# } }}

</script>

<script id="endedPeriodItemTemplate" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i=i+1){ }}

    <div class="divEndPeriod" onclick="showEndedDetail('{{ d[i].Id }}')">
        {{ d[i].Name }}
    </div>

    {{# } }}

</script>



<div id="divImageContainer">
    <img src="@Model.Campaign.ImageUrl" name="img" id="img" style="width: 100%;">
</div>

<div class="divContent">
    <div style="margin-top: 0.06rem" class="campaignName">
        @Model.Campaign.Name
    </div>
    <div style="margin-top: 0.06rem" class="campaignDescription">
        @Html.Raw(Model.Campaign.Introduction)
    </div>

    <div style="text-align: center">
        <div class="divRectangle" style="margin-top: 0.1rem;" onclick="showCampaignDescription()">
            查看活动详情
        </div>
    </div>

    <div style="text-align: center; margin-top: 0.1rem;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="33%" align="center">参与人数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.MemberCount</span>
                </td>
                <td width="33%" align="center">中奖人数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.WinMemberCount</span>
                </td>
                <td width="33%" align="center">围观次数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.PageVisitCount</span>
                </td>
            </tr>
        </table>
    </div>

    <div class="divDotLine" style="margin-top: 0.05rem; margin-bottom: 0.1rem;">
    </div>
    <div id="divMemberInfo" onclick="showShareMask()">
        <table border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td align="left" style="width: 0.3rem">
                    <img src="/Content/Images/shareTimeLine.jpg" style="width: 0.2rem;"></td>
                <td align="left">分享给小伙伴吧~</td>
            </tr>
        </table>
    </div>

    <div style="margin-top: 0.1rem; font-weight: bold">
        进行中
    </div>
    <div id="ongoingPeriodContainer">
    </div>
    <div id="divOngoingPagingContainer" class="divPagingContainer" style="margin-top: 0.2rem; text-align: center" onclick="loadOngoingPeriod(_ongoingCurrentPage + 1)">
        查看更多
    </div>

    <div style="margin-top: 0.1rem; font-weight: bold">
        已结束
    </div>
    <div id="endedPeriodContainer">
    </div>
    <div id="divEndedPagingContainer" class="divPagingContainer" style="margin-top: 0.2rem; text-align: center" onclick="loadOngoingPeriod(_ongoingCurrentPage + 1)">
        查看更多
    </div>

</div>

<div id="divShareMask" style="display: none" onclick="hideShareMask()">
    <img src="/Content/Images/share.PNG" width="200" height="145">
</div>
